<template>
  <div class="max-w-5xl mx-auto py-12 px-4">
    <h1 class="text-3xl font-bold text-white mb-8">
      <span v-if="categoryName" class="ml-4 text-primary text-3xl font-semibold">{{ categoryName }}</span>
    </h1>
    <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
      <router-link v-for="post in posts" :key="post.id" :to="'/post/' + post.id" class="block group">
        <article
          class="bg-dark-light/80 backdrop-blur-sm rounded-xl overflow-hidden border border-primary/20 card-hover hover:border-primary/50 shadow-lg hover:shadow-primary/10 relative group">
          <div class="relative h-48 overflow-hidden">
            <img :src="post.image" :alt="post.title" class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-98">
            <div class="absolute inset-0 bg-gradient-to-t from-dark via-dark/50 to-transparent"></div>
          </div>
          <div class="p-6">
            <h3 class="text-xl font-bold text-white mb-3 hover:text-primary transition-colors text-shadow group-hover:text-primary/90 line-clamp-2">
              {{ post.title }}
            </h3>
            <p class="text-gray-400 mb-4 line-clamp-2">{{ post.excerpt }}</p>
            <div class="flex items-center justify-between">
              <div class="flex items-center">
                <img :src="pictureUrl" alt="科技创客" class="w-8 h-8 rounded-full mr-2">
                <span class="text-gray-300 text-sm">{{ post.author }}</span>
                <span class="mx-2 text-gray-500">•</span>
                <time :datetime="post.date" class="text-gray-500 text-sm">{{ formatDate(post.date) }}</time>
                <span class="mx-2 text-gray-500">•</span>
                <span class="text-gray-500 text-sm">{{ post.readTime }}</span>
              </div>
              <div class="flex items-center text-gray-500 text-sm">
                <i class="fa fa-eye mr-1"></i> {{ post.views }}
              </div>
            </div>
          </div>
        </article>
      </router-link>
    </div>
  </div>
</template>

<script>
import blogPosts from '../data/blogPosts'
import { pictureUrl } from '@/assets/image';

export default {
  data() {
    return {
      posts: [],
      pictureUrl
    }
  },
  created() {
    const category = this.$route.query.category;
    if (category) {
      this.posts = blogPosts.filter(post => post.category === category);
    } else {
      this.posts = blogPosts;
    }
  },
  watch: {
    '$route.query.category'(newCategory) {
      if (newCategory) {
        this.posts = blogPosts.filter(post => post.category === newCategory);
      } else {
        this.posts = blogPosts;
      }
    }
  },
  computed: {
    categoryName() {
        debugger
      const category = this.$route.query.category;
      const foundCategory = blogPosts.find(post => post.category === category);
      return foundCategory ? foundCategory.category : category;
    }
  },
  methods: {
    formatDate(dateString) {
      const date = new Date(dateString);
      return date.toLocaleDateString('zh-CN', { year: 'numeric', month: 'long', day: 'numeric' });
    },
  }
}
</script>

<style scoped>
.card-hover {
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  --tw-bg-opacity: 1;
  background: rgba(20, 24, 40, 0.12);
  backdrop-filter: blur(1px) saturate(120%);
  -webkit-backdrop-filter: blur(12px) saturate(120%);
  box-shadow: 0 4px 32px #0002;
}
.card-hover:hover {
  transform: translateY(-8px) scale(1.01);
}
</style>
